<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例</title>
  <style>
    .row {
       display: flex;
       flex-direction: row;
       justify-content: top;
       flex-wrap: wrap;
     }
     .column {
       display: flex;
       flex-direction: column;
       justify-content: center;
     }
     .p1{
       font-size: 4vw;
       font-weight: 600;
       color: #31BDC8;
     }
     .img1{
       width: 10vw;
       height: 10vw;
       border-radius: 50vw;
     }
     .divv{
       width: 18vw;
       align-items: center;
       justify-content: top;
       height: 100%;
       /* height: 30vw; */
     }
     a{
       text-decoration: none;
       color: #f3004d;
       font-size: 3vw;
       font-weight: 600;
     }
 </style>
</head>
<body>
  <div id="div1">
    <p class="p1" id="p01"></p>
  <div class="row" id="div2">
    <div class="column divv" id="div3">
      <img class="img1" src="https://img1.baidu.com/it/u=114452211,3487042370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=635" alt="">
      <a class="a" id="a01" href=" https://dh.mengdaohang.com/ " target="_blank"></a>
    </div>
  </div>
  </div>

  <script>
    const list = [
      { title: '张三', data:[
        { name: 'bbb',URL: 'https://www.baidu.com' },
        { name: 'bbb',URL: 'https://www.baidu.com' },
      ] },
      { title: '张三', data:[
        { name: 'bbb',URL: 'https://www.baidu.com' },
        { name: 'bbb',URL: 'https://www.baidu.com' },
      ] },
    ];

    const div1 = document.getElementById('div1');
    const div2 = document.getElementById('div2');
    const div3 = document.getElementById('div3');
    const a01 = document.getElementById('a01');
    const p01 = document.getElementById('p01');
    list.forEach(item => {
      p01.textContent = item.title;
      item.forEach(dee => {
        a01.textContent.appendChild(dee.name);
        a01.href = dee.URL;    
      });
    });
  </script>
</body>
</html>